<template>
  <div ref="boxRef" class="main">
    <div class="layout-container">
      <dv-border-box-10>
        <div>胶囊柱图</div>
        <dv-decoration-1 style="width: 200px; height: 50px" />
        <dv-capsule-chart
          :config="configChart"
          style="width: 300px; height: 200px"
        />
        <div>水位图</div>
        <dv-decoration-6 style="width: 300px; height: 30px" />
        <dv-water-level-pond
          :config="configPond"
          style="width: 150px; height: 200px"
        />
        <div>数字</div>
        <dv-decoration-3 style="width: 250px; height: 30px" />
        <el-button type="primary" @click="clickMe">点我</el-button>
        <dv-digital-flop
          :config="configFlop"
          style="width: 150px; height: 50px"
        />

        <div>轮播表</div>
        <dv-scroll-board
          :config="configBoard"
          style="width: 500px; height: 220px"
        />

        <dv-decoration-9 style="width: 150px; height: 150px"
          >66%</dv-decoration-9
        >
      </dv-border-box-10>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { useIndex } from "@/utils/useDraw.js";
const boxRef = ref();
// 胶囊柱图
const configChart = reactive({
  data: [
    {
      name: "南阳",
      value: 167,
    },
    {
      name: "周口",
      value: 123,
    },
    {
      name: "漯河",
      value: 98,
    },
    {
      name: "郑州",
      value: 75,
    },
    {
      name: "西峡",
      value: 66,
    },
  ],
  colors: ["#e062ae", "#fb7293", "#e690d1", "#32c5e9", "#96bfff"],
  unit: "单位",
  showValue: true,
});
// 水位图
const configPond = reactive({
  data: [55],
  shape: "round",
});
// 数字

// const configFlop = [];
const configFlop = reactive({ number: [1000], content: "{nt}个" });
const clickMe = () => {
  console.log(2222, configFlop);
  configFlop.number[0] = 999999;
};
// 轮播表
const configBoard = reactive({
  header: ["列1", "列2", "列3"],
  data: [
    ["行1列1", "行1列2", "行1列3"],
    ["行2列1", "行2列2", "行2列3"],
    ["行3列1", "行3列2", "行3列3"],
    ["行4列1", "行4列2", "行4列3"],
    ["行5列1", "行5列2", "行5列3"],
    ["行6列1", "行6列2", "行6列3"],
    ["行7列1", "行7列2", "行7列3"],
    ["行8列1", "行8列2", "行8列3"],
    ["行9列1", "行9列2", "行9列3"],
    ["行10列1", "行10列2", "行10列3"],
  ],
});
// 生命周期
onMounted(() => {
  const { appRef, calcRate, windowDraw } = useIndex(boxRef.value);
  windowDraw();
  calcRate();
});
onUnmounted(() => {
  const { unWindowDraw } = useIndex(boxRef.value);
  unWindowDraw();
});
</script>
<style lang="scss" scoped>
.main {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;

  .layout-container {
    width: 100%;
    height: 100%;
  }
}
</style>